<template>
  <div class="common-page f-c">
    <div class="firstLine f-r a-c">
      <div class="finished pa-mr-1" />
      <div class="finishedText pa-mr-1">已完成</div>
      <div class="inProgress pa-mr-1" />
      <div class="processText pa-mr-1">进行中</div>
      <div class="notFinish pa-mr-1" />
      <div class="notText">未完成</div>
    </div>
    <div class="project-canvas-page f-g">
      <div class="canvas">
        <div :id="domId" class="full" />
      </div>
    </div>
  </div>
</template>

<script>
function createRandomId() {
  return (
    (Math.random() * 10000000).toString(16).substr(0, 4) +
    '-' +
    new Date().getTime() +
    '-' +
    Math.random()
      .toString()
      .substr(2, 5)
  )
}

import { Topology } from '@topology/core'
import { http_project_process } from '@/api'
// 配置项
const canvasOptions = {
  lineName: 'line',
  minScale: 0,
  maxScale: 50,
  // 连线颜色
  font: {
    color: '#fff',
    fontSize: 12
  },
  // 键盘事件 如 删除 移动
  keydown: -1,
  // 缩放 如 ctrl + mousewheel 缩放
  disableScale: true,
  // 移动 如 ctrl + mouse 移动
  disableTranslate: true,
  disableEmptyLine: false,
  autoAnchor: false,
  // autoExpandDistance: 0,
  cacheLen: 0,
  anchorFillStyleL: '#1976d2',
  dockFillStyle: '#1976d2',
  hideInput: false
}

export default {
  name: 'ProjectCanvas',
  props: {
    projectId: String
  },
  data() {
    return {
      domId: createRandomId(),
      canvas: null,
      productList: []
    }
  },
  mounted() {
    this.initCanvas()
  },
  beforeDestroy() {
    /**
     *  销毁画布
     */
    this.canvas.destroy()
    this.canvas = null
    document.onclick = null
  },
  methods: {
    initCanvas() {
      this.canvas = null
      canvasOptions.on = this.onMessage
      this.canvas = new Topology(this.domId, canvasOptions)
      setTimeout(() => {
        // 修复鼠标框选错位
        this.canvas.data.lineName = 'polyline'
        this.canvas.data.toArrow = ''
      }, 1000)
      http_project_process.read({
        projectId: this.projectId
      }).then(res => {
        if (res.data.canvas) {
          console.log(res)
          const productList = res.data.productList
          this.productList = res.data.productList
          this.canvas.open(res.data.canvas)
          setTimeout(() => {
            this.canvas.canvasPos = this.canvas.divLayer.canvas.getBoundingClientRect()
            // this.canvas.fitView()
            this.canvas.data.pens.forEach(el => {
              el.strokeStyle = '#1976d2'
            })
            this.canvas.data.pens.forEach(pen => {
              if (pen.data) {
                if (pen.data.type === 'node') {
                  const find = productList.find(p => p.productCode === pen.data.productCode)
                  if (find) {
                    console.log('find.status', find.status)
                    const color = this.getStatusColor(find.status)
                    console.log('color', color)
                    pen.fillStyle = color
                    pen.strokeStyle = color

                    // 设置连线颜色
                    const lines = this.canvas.data.pens.filter(_pen => _pen.type === 1)
                    for (let i = 0; i < lines.length; i++) {
                      const _line = lines[i]
                      console.log(_line)
                      if (_line.to.id === pen.id) {
                        _line.strokeStyle = color
                      }
                    }
                  }
                }
              }
            })
            this.canvas.lock(10)
            this.canvas.render()
          })
        }
      })
    },
    onMessage(event, data) {
      if (event === 'node') {
        if (data && data.type === 0 && data.data.type === 'node') {
          // 处理标书
          if (data.data.productCode === 'B203' || data.data.productCode === 'B204') {
            return
          }
          const product = this.productList.find(el => el.productCode === data.data.productCode)
          if (product.status === 1 || product.status === 2) {
          } else if (product.status === 0) {
          }
        }
      }
    },
    // 0未完成 1进行中 2已完成
    getStatusColor(status) {
      if (status === 0) {
        return '#999999'
      } else if (status === 1) {
        return '#FF7940'
      } else if (status === 2) {
        return '#10AA7F'
      } else {
        return '#1976d2'
      }
    }
  }
}
</script>

<style scoped lang="scss">

.pa-mr-1 {
  margin-right: 10px;
}

.firstLine {
  margin-left: 50px;
}

.finished {
  width: 34px;
  height: 17px;
  background: #0faa7e;
  border-radius: 5px;
}

.finishedText {
  font-size: 18px;
  font-weight: 500;
  color: #0faa7e;
}

.inProgress {
  width: 34px;
  height: 17px;
  background: #ff7840;
  border-radius: 5px;
}

.processText {
  font-size: 18px;
  font-weight: 500;
  color: #ff7840;
}

.notFinish {
  width: 34px;
  height: 17px;
  border: 1px solid #999999;
  border-radius: 5px;
  background-color: #999999;
}

.notText {
  font-size: 18px;
  font-weight: 500;
  color: #333333;
}

.project-canvas-page {
  padding: 20px;

  .canvas {
    height: 100%;
    padding-bottom: 20px;

    .full {
      width: 100%;
      height: 100%;
      touch-action: none;
    }
  }

  .canvas-content-header {
    height: 47px;
    border-bottom: 1px solid #DDDDDD;

    .export-icon {
      width: 56px;
      height: 18px;
      background: #2F86FD;
      border-radius: 5px;
      line-height: 18px;
      color: #ffffff;
      font-size: 10px;
      text-align: center;
    }

    .item {
      .icon {
        width: 23px;
        height: 12px;
        border-radius: 6px;
        margin-right: 10px;
      }

      .name {
        font-size: 10px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
      }

      .icon1 {
        background-color: #10AA7F;
      }

      .icon2 {
        background-color: #FF7940;
      }

      .icon3 {
        background-color: #999999;
      }
    }
  }
}
</style>
